<!--
 * @Author: 陈鹏新 cpx15004862443@qq.com
 * @Date: 2025-09-11 08:41:57
 * @LastEditors: 陈鹏新 cpx15004862443@qq.com
 * @LastEditTime: 2025-09-28 09:25:47
 * @FilePath: \前端\city\src\pages\components\Bottom4.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></title>
            
        <div ref="Bottom4" style="height: 150px;"></div>
    </div>
</template>

<script>
import { Area } from '@antv/g2plot';
// 引入get请求  @表示src别名
import { get } from '@/utils/request';
import moment from 'moment';
export default {
    data() {
        return {
            title: '实时风速',
            params: {
                page: 1,
                pageSize: 100,
            },
            tempData: [],
            area: null
        }
    },

    methods: {
        loadArea() {
            this.area = new Area(this.$refs.Bottom4, {
                data: this.tempData,
                xField: 'insert_time',
                yField: 'wind_speed',

            });
            this.area.render();
        },
        //封装方法获取后端接口中实时数据
        async getTimeData() {
            let res = await get('/dashboard/pageQueryData', this.params);
            console.log(res, "获取响应");
            let temp = [];
            //将后端获取的数据设置给tempData
            res.data.list.forEach((item, index, arr) => {
                //item表示数组每一项
                item.insert_time = moment(item.insert_time).format("HH:mm");
                arr[0].wind_speed=1;
                
                // 由于查询数据密度密集 需要将数据处理 每隔10条数据取1条数据
                if (index % 10 == 0) {
                    temp.push(arr[index]);
                }
            }),
                this.tempData = temp;
        }
    },
    //最早获取dom元素的生命周期
    async mounted() {
        await this.getTimeData();
        this.loadArea();
    }
}

</script>

<style lang="less" scoped></style>